
// 列表的头部
<template>
    <div>
        <div class="top">
            <el-row>
                <el-col :span="1.5"><div class="grid-content bg-purple">
                    <el-button @click="fanhui()" size='mini' type="primary">返回</el-button>
                </div></el-col>
                <el-col :span="3"><div class="grid-content bg-purple-light">
                    <div class="lujing">
                        商品列表 > 商品详情
                    </div>
                </div></el-col>
                <el-col :span="7"><div class=" spxx grid-content bg-purple">
                    <img :src="aa.imag" alt="">
                    <span>{{aa.xinxi}}</span>
                </div></el-col>
                <el-col :span="1.5"><div class="grid-content bg-purple-light">
                    <el-button @click="fanhui()" size='mini' type="primary">确定</el-button>
                </div></el-col>
                <el-col :span="1.5"><div class="grid-content bg-purple">
                    <el-button @click="fanhui()" size='mini' type="info">取消</el-button>
                </div></el-col>
            </el-row>
        </div>
        
    </div>
</template>

<script>
export default {
    props:['aa'],
    methods:{
        // 去找父级 xinxitianj  里的  fanhui 函数
        fanhui(){
            this.$emit('fanhui')
        }
    }
};
</script>

<style lang="scss" scoped>
.top{
    font-size: 12px;
    .spxx{
        span{
            width: 80%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
//   .bg-purple-dark {
//     background: darkgoldenrod;
//   }
//   .bg-purple {
//     background: #bbb;
//   }
//   .bg-purple-light {
//     background: #e5e9f2;
//   }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 10px;
    box-shadow: 0px 0px 20px rgb(189, 186, 186);
    img{
        height: 30px;
        border-radius: 5px;
        margin-left: 5px;
        margin-right: 20px;
    }
    button{
        height: 36px;
    }
  }
  .lujing{
      width: 100%;
      height: 100%;
  }
  
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>